<template>
  <div class="page">
    <h4>筛选</h4>
    <el-row :gutter="20">
      <el-form id="formbox" ref="formInline" :inline="true" :model="formInline">
        <el-col :span="8" class="mb20">
          <el-form-item label="任务编号 :" prop="taskId">
            <el-input
              clearable
              v-model="formInline.taskId"
              placeholder="请输入任务编号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="组名称 :" prop="groupName">
           <el-input
              clearable
              v-model="formInline.groupName"
              placeholder="请输入组名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="是否启动 :" prop="isStarted">
            <el-select v-model="formInline.isStarted" placeholder="请选择状态">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="修改时间 :" prop="modifyTime">
            <el-date-picker
            :disabled-date="disableFutureDates"
              v-model="formInline.modifyTime"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6" class="form-button">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onReset('formInline')">重置</el-button>
            <el-button type="primary" @click="addEditResidents">新增</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="table-container">
      <el-col :span="24"
        ><h4 style="margin-left: 3px;"> 任务列表 (共{{ total }}条)</h4></el-col
      >
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      border
      :default-sort="{ prop: 'date', order: 'descending' }"
      style="width: 100%"
      tooltip-effect="light"
      row-key="id"
      @selection-change="handleSelectionChange"
      :header-cell-class-name="setClassName"

    >
      <!-- v-loading="loading" -->

      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column
        prop="name"
        label="任务编号"

        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="idNumber"
        label="组名称"
        align="center"

        show-overflow-tooltip
      />

      <el-table-column
        prop="address"
        label="时间间隔"
        align="center"

        show-overflow-tooltip
      />
      <el-table-column
        prop="address"
        label="是否启动"
        align="center"

        show-overflow-tooltip
      />
   
      <el-table-column
        prop="name"
        label="描述"
        align="center"

        show-overflow-tooltip
      />

      <el-table-column
        prop="createTime"
        align="center"
    
        label="修改时间"
        show-overflow-tooltip
      />

      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="140"
        align="center"
        fixed="right"
      >
        <template #default="scope">
          <el-button
            text=""
            size="small"
            type="primary"
            @click="openEditResidents(scope.row)"
            >编辑</el-button
          >
          <el-button
            text=""
            size="small"
            type="danger"
            @click="delFollow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" style="display: flex; justify-content: end">
      <el-pagination
        v-if="this.total > 0"
        v-model:currentPage="this.currentPage"
        v-model:page-size="this.pageSize"
        :total="this.total"
        :page-sizes="[10, 20, 50, 100, 500]"
        class="new-pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-col>
    <EditDialog ref="editDialogRef" :dialogObj="dialogObj" />

    <!--@reloadTable="handleQuery" -->
  </div>
</template>

<script lang="ts">
import MenuCheck from "@/components/menu-check/index.vue";
import DeptList from "@/components/dept-list/index.vue";
import EditDialog from "@/pages/examples/task/components/editDialog.vue";
const disableFutureDates = (time) =>  time > new Date();
export default {
  components: {
    MenuCheck,
    DeptList,
    EditDialog,
  },
  data() {
    return {
      //记录条数
      total: 1,
      //每页条数
      pageSize: 10,
      //当前页码
      currentPage: 1,
      //选择条数
      selectionCount: 0,
      //选择数组
      multipleSelection: [],
      //全选状态
      checkedAll: false,
      dialogObj: {
        //弹窗标题
        editResidentsTitle: "",
        //弹窗是否显示
        isDialogVisible: false,
        DialogDate: {},
      },
      //表格数据
      tableData: [
   
      ],
      ruleform: {
        name: "",
      },
      formInline: {
      

     

       taskId: "", // 任务编号
        groupName: "", // 组名称
        isStarted: "", // 是否启动

        modifyTime: "", // 修改时间
      },
    };
  },
  methods: {
    disableFutureDates,
    getTodayRange() {
      const today = new Date();
      const formatDate = (date) => {
        const y = date.getFullYear();
        const m = (date.getMonth() + 1).toString().padStart(2, "0");
        const d = date.getDate().toString().padStart(2, "0");
        return `${y}-${m}-${d}`;
      };
      const todayStr = formatDate(today);
      console.log(todayStr);

      return [todayStr, todayStr];
    },
    onSubmit() {},
    //重置搜索
    onReset(formName) {
      this.$refs[formName].resetFields();

      this.formInline.startTime = "";
      this.formInline.nextFollowTime = "";
      this.currentPage = 1;
    },
    addEditResidents(row){
      this.dialogObj.editResidentsTitle = "新增任务调度";
      this.dialogObj.isDialogVisible = true;
    },
    //打开编辑页
    openEditResidents(row) {
      this.dialogObj.editResidentsTitle = "编辑";
      this.dialogObj.isDialogVisible = true;
      this.dialogObj.DialogDate = row;
    },
    //删除随访
    delFollow(row) {
      this.$confirm("此操作将永久删除该随访, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
    // 改变页面容量
    handleSizeChange(val: number) {
      this.pageSize = val;
      // handleQuery();
    },

    // 改变页码序号
    handleCurrentChange(val: number) {
      this.currentPage = val;
      // handleQuery();
    },
    checkSelectable() {
      return this.checkedAll != true;
    },
    checkedAllChange() {
      if (this.checkedAll == true) {
        this.selectionCount = this.tableData.length;
        console.log(this.selectionCount);

        this.tableData.forEach((row: any) => {
          this.$refs.multipleTableRef!.toggleRowSelection(row, true);
        });
      } else {
        this.selectionCount = 0;
        this.$refs.multipleTableRef!.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if(val.length==this.total||val.length==this.pageSize){
        this.checkedAll = true;
        this.selectionCount=val.length;
      }else{
        this.checkedAll = false;
        this.selectionCount=0;
      }

      // console.log("val",val);
      // if(multipleSelection.value.length==0){
      //   checkedAll.value=false;
      // }
    },
    setClassName({ column }) {
      return this.checkedAll == true ? "all-disabled" : "";
    },
    //新增体检
    exportRecord() {},
    //导入
    importSelect() {},
    //导出
    exportSelect() {},
    //删除
    testSt() {},
    //更新his
    showUpload() {},
  },
  computed: {},
};
</script>
<style scoped>
.page {
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
}
#formbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30px;
}
.mb20 {
  /* margin: 0 20px; */
}
.tb{
  padding: 0 20px;
  /* overflow: hidden;
   margin-top: 2vw; */
  overflow-y: scroll;
}
:deep(.el-input__wrapper) {
  width: 230px;
}
:deep(.el-form-item .el-select__wrapper) {
  min-height: 32px;
  width: 252px;
}
:deep(.el-range-editor--large.el-input__wrapper) {
  height: 32px;
  width: 232px;
}
.form-button {
  display: flex;
  justify-content: start;
}
.table-container {
  display: flex;
  flex-direction: column;
}
.table-btn {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-around;
}
.tr {
  text-align: right;
  height: 50px;
  line-height: 50px;
}
::v-deep .all-disabled .el-checkbox__input .el-checkbox__inner {
  display: none;
}

.new-pagination {
  margin: 30px 0 10px 0 !important;
}
</style>
